import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Layout, Breadcrumb, Typography, Card, Divider, Tag } from 'antd';
import { UserOutlined, CalendarOutlined, TagOutlined } from '@ant-design/icons';

const { Content } = Layout;
const { Title, Paragraph, Text } = Typography;

// 模拟全站数据。在真实应用中，这些数据会从API获取。
const allData = [
  {
    id: 1,
    title: "初探 React Hooks",
    publishDate: "2024-03-15",
    category: "技术分享",
    content: `
      React Hooks 是 React 16.8 版本引入的重大更新，它彻底改变了我们编写 React 组件的方式。通过 Hooks，我们可以在不使用 class 的情况下，为函数组件引入 state 和生命周期等特性。
      
      本文将带你深入了解几个最核心的 Hooks，包括 useState、useEffect 和 useContext，并通过实例讲解它们的使用场景和注意事项，希望能帮助你更平滑地从 Class Components 过渡到 Functional Components。
    `
  },
  {
    id: 2,
    title: "一次难忘的徒步旅行",
    publishDate: "2024-03-22",
    category: "生活随笔",
    content: `
      上周末，我和几位朋友一起去郊外进行了一次徒步旅行。清晨的空气格外清新，阳光透过树叶的缝隙洒在小径上，形成斑驳的光影。我们沿着山路向上攀登，沿途的风景美不胜收。
      
      这次旅行不仅锻炼了身体，更让我的心灵得到了一次彻底的放松。远离城市的喧嚣，与自然亲密接触，让我重新找回了内心的平静和力量。
    `
  },
  // ... 其他文章和生活数据可以添加在这里
];


/**
 * 详情页组件
 * 用于展示文章或生活点滴的具体内容。
 * 内容根据URL中的ID动态获取。
 */
const DetailPage = () => {
  const { id } = useParams();

  // 根据ID查找文章，如果找不到则显示默认内容
  const articleData = allData.find(item => item.id.toString() === id) || {
    id: 0,
    title: "未找到内容",
    author: "系统",
    publishDate: "N/A",
    category: "无",
    content: "抱歉，无法根据您提供的ID找到对应的内容。请检查链接是否正确。"
  };

  return (
    <Content className="bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
      <div className="container mx-auto">
        {/* 面包屑导航 */}
        <Breadcrumb style={{ marginBottom: '16px' }}>
          <Breadcrumb.Item><Link to="/">首页</Link></Breadcrumb.Item>
          <Breadcrumb.Item><Link to="/articles">我的文章</Link></Breadcrumb.Item>
          <Breadcrumb.Item>{articleData.title}</Breadcrumb.Item>
        </Breadcrumb>
        
        <Card>
          {/* 文章标题区 */}
          <div className="text-center mb-8">
            <Title level={2}>{articleData.title}</Title>
            
            {/* 元信息 */}
            <div className="flex justify-center items-center text-gray-500 text-sm mt-4 space-x-4">
              <Text type="secondary"><UserOutlined style={{ marginRight: 8 }} />{articleData.author}</Text>
              <Text type="secondary"><CalendarOutlined style={{ marginRight: 8 }} />{articleData.publishDate}</Text>
              <Text type="secondary"><TagOutlined style={{ marginRight: 8 }} />{articleData.category}</Text>
            </div>
          </div>
          
          {/* 大图 (可选，这里用颜色渐变代替) */}
          <div className="w-full h-64 md:h-80 bg-gradient-custom-2 relative rounded-lg mb-8">
            <div className="absolute inset-0 flex items-center justify-center text-white text-4xl font-bold">
              {articleData.title}
            </div>
          </div>
          
          {/* 文章内容 */}
          <Typography>
            {articleData.content.split('\n\n').map((paragraph, index) => (
              <Paragraph 
                key={index} 
                style={{
                    fontSize: '16px',
                    lineHeight: '1.8',
                }}
              >
                {paragraph.trim()}
              </Paragraph>
            ))}
          </Typography>
        </Card>
      </div>
    </Content>
  );
};

export default DetailPage;